<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>修改密码</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
        }

        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 75px;
            text-align: left;
            background-color: #fff;
            border-bottom: 1px solid #f2f2f2;
        }

        header .back {
            position: relative;
            margin-top: 38px;
            width: 100%;
            height: 1.5rem;
            text-align: center;
        }

        .back img {
            position: absolute;
            left: 1rem;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }

        main {
            padding-top: 75px;
        }

        main .changeTable {
            padding: 1rem;
            box-sizing: border-box;
        }

        .changeTable li {
            padding: 0.5rem 0;
            height: 2rem;
            border-bottom: 1px solid #f2f2f2;
        }

        li.password,
        li.confirmpassord {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        li.password .showpwd {
            vertical-align: middle;
            width: 1.5rem;
            height: 1.5rem;
            display: none;
        }

        .changeBtn {
            margin-top: 1rem;
            width: 100%;
            height: 3rem;
            color: #fff;
            font-size: 1.2rem;
            border-radius: 0.5rem;
            background-color: #FBB40E;
        }
    </style>
</head>

<body>
    <header>
        <div class="back">
            <img src="../image/icon/back.png" alt="" onclick="api.closeWin()">
            <span>修改密码</span>
        </div>
    </header>
    <main>
        <ul class="changeTable">
            <li class="password">
                <input type="password" name="" value="" placeholder="请输入新的密码">
                <img src="../image/icon/hidepwd.png" alt="" class="showpwd">
            </li>
            <li class="confirmpassord">
                <input type="password" name="" value="" placeholder="请确认新密码">
            </li>
            <li><button class="changeBtn">重置密码</button></li>
        </ul>
    </main>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    apiready = function() {

    };

    $('.changeBtn').click(function() {
        var password = $('.password input').val();
        var confirmpwd = $('.confirmpassord input').val();
        var i = $api.getStorage('userid');
        if (!password) {
            api.toast({
                msg: '密码不能为空',
                duration: 2000,
                location: 'bottom'
            });
            $('.password input').focus();
            return
        }
        if (!confirmpwd) {
            api.toast({
                msg: '确认密码不能为空',
                duration: 2000,
                location: 'bottom'
            });
            $('.confirmpassord input').focus();
            return
        }
        if (confirmpwd != password) {
            api.toast({
                msg: '两次输入密码不一致',
                duration: 2000,
                location: 'bottom'
            });
        } else {
            api.ajax({
                url: 'http://122.112.138.133/wangt/jianzhi/updatepwd.com',
                method: 'post',
                data: {
                    body: {
                        'tbname': 'userinfo',
                        'id': i,
                        'password': password
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    if(ret.status == 1) {
                      $api.clearStorage();
                      api.toast({
                          msg: '修改密码成功',
                          duration: 2000,
                          location: 'bottom'
                      });
                      api.openWin({
                          name: 'login',
                          url: './login.html',
                          slidBackEnabled: false
                      });
                    }
                }
            });

        }
    })

    $('.changeTable .password>input').bind('input propertychange', function() {
        if ($(this).val() != '' && $.trim($(this).val()).length != 0) {
            $('.showpwd').css('display', "block");
            $('.showpwd').click(function() {
                if ($(this).attr('src') == "../image/icon/hidepwd.png") {
                    $(this).attr('src', "../image/icon/showpwd.png");
                    $('.password input').attr('type', "text");
                } else {
                    $(this).attr('src', "../image/icon/hidepwd.png");
                    $('.password input').attr('type', "password");
                }
            })
        } else {
            $('.showpwd').css('display', "none");
        }
    })
</script>

</html>
